<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="true" %>
<html>
<head>
    <title>员工授权</title>
    <%@include file="/comm/head.jsp"%>
</head>
<body>
<div id="root">
<Collapse value="search">
    <Panel name="search">
        条件查询
        <p slot="content">
            <i-form inline :label-width="80">
        <form-item label="员工代号:">
            <i-input type="text" v-model="userVo.userCode"/>
        </form-item>
                <form-item label="员工角色:">
                   <i-select v-model="userVo.userRole" style="width: 110px" filterable>
                       <i-option value="">--不限--</i-option>
                       <i-Option v-for="item in roleList" :value="item.id" :key="item.id">{{item.roleName}}</i-Option>
                   </i-select>
                </form-item>
                <form-item label="出生日期:">
                    <row>
                    <col span="12"> <date-picker @on-change="userVo.startDate=$event"  placeHolder="请输入起始日期" style="width: 150px" type="date" ></date-picker></col>
                        <col span="12"> <date-picker @on-change="userVo.endDate=$event"   placeHolder="请输入结束日期" style="width: 150px" type="date" ></date-picker></col>
                    </row>
                </form-item>
                <i-button type="primary"icon="ios-search" @click="pageNo=1;searchUserList();">搜索</i-button>
                <i-button type="success"icon="md-sync" @click="userVo={};searchUserList();pageNo=1"></i-button>
            </i-form>
        </p>
    </Panel>
</Collapse>
 <card>
<shiro:hasPermission name="user:grant">
        <i-button type="primary" @click="toGrant">员工授权</i-button>
</shiro:hasPermission>
    </card>
    <i-table  :columns="columns" :data="pageResult.rows" :height="300" border stripe  @on-selection-change="tableSelection=arguments[0]">
        <template slot-scope="{row}" slot="gender">
            <span>{{row.gender==1?"男":"女"}}</span>
        </template>
        <template slot-scope="{row}" slot="roleName">
            <span>{{row.role.roleName}}</span>
        </template>
        <template slot-scope="{row}" slot="attachPath">
            <img :src="row.attachPath" alt="" width="50">
        </template>
    </i-table>
<shiro:hasPermission name="user:grant">
    <modal v-model="grantFlag" title="员工授权"  @on-ok="grant">
        <i-table  ref="table"  height="400"  :columns="myColumns" :data="treeData" border stripe  style="height:400px"  @on-selection-change="tableSelection1=arguments[0]">
        </i-table>
    </modal>
</shiro:hasPermission>
   <!-- <modal v-model="updateFlagpwd" title="修改用户密码" @on-ok="updatepwd">
        <i-form :label-width="80" style="padding: 30px" >
            <form-item label="用户名称">
                <i-input v-model="user.username" size="large" readonly />
            </form-item>
            <form-item label="用户密码">
                <i-input v-model="user.password" size="large"/>
            </form-item>
        </i-form>
    </modal>-->
  <Page :total="pageResult.total"
        :page-size="pageSize"
       <%-- :current.sync="pageNo"--%>
          @on-change="pageNo=arguments[0];searchUserList();"
       <%-- @on-change="searchUserList"--%>
        show-sizer
        :page-size-opts="[5,10,15]"
       <%-- @on-page-size-change="changPageSize"--%>
        @on-page-size-change="pageSize=arguments[0];searchUserList();"
  />
</div>
<script>
    new Vue({
        el:"#root",
        data:{
            columns:[
            {type:"selection",width:60,align:"center"},
            {key:"userCode",title:"员工代号",align:"center"},
            {key:"username",title:"员工名",align:"center"},
            {slot:"gender",title:"性别",align:"center" },
            {key:"birthday",title:"生日",width:120,align:"center"},
            {key:"phone",title:"手机号",align:"center"},
           // { key:"address",title:"用户地址"},
            /*{ key:"userRole",title:"角色编号"},*/
            { slot:"roleName",title:"角色名称",align:"center"},
            {title:"工作照",slot: "attachPath",align:"center"},
        ],
            myColumns:[
                {type:"selection",width:60,align:"center",checked:true},
                { key:"roleName",title:"角色名称"},
                { key:"roleCode",title:"角色代号"},
                ],
            pageResult:{
                rows:[],
                total:50,
                render: (h, params) => {
                    return h(expandRow, {
                        props: {
                            row: params.row
                        }
                    })
                }
            },
            userVo:{},
            roleList:[],
            user:{},
            grantFlag:false,
            treeData:[],
            tableSelection:[],
            tableSelection1:[],
            pageNo:1,
            pageSize:5,
            updateFlagpwd:false,
        },
       methods:{
            searchUserList(){
               axios.get(`${ctx}/sys/user/search/${this.pageNo}/${this.pageSize}`,{params:this.userVo})
                    .then(({data})=>{
                        this.pageResult=data.result;
                    });
            },

           searchRoleList(){
               axios.get(`${ctx}/sys/role/list`)
                   .then(({data})=>{
                       this.roleList=data.result;
                   });
           },
           toGrant(){
               if(this.tableSelection.length!=1) {
                   iview.Modal.error({
                       title:"信息提示",
                       content:"请选择一项只能选择一项待授权"
                   });
                   return;
               }
               axios.get(`${ctx}/sys/user/search4Tree?id=${this.tableSelection[0].id}`)
                   .then(({data})=>{
                       this.treeData=data.result;
                       this.grantFlag=true;
                     var RoleId=  this.tableSelection[0].userRole
                       for(var i=0;i<this.treeData.length;i++) {
                           if (this.treeData[i].id==RoleId) //这里写上你的条件
                           {
                               this.treeData[i]._checked= true
                           }
                       }

                   });
           },
           grant(){
               if(this.tableSelection1.length!=1) {
                   iview.Modal.error({
                       title:"信息提示",
                       content:"请选择一项且只能选择一个角色"
                   });
                   return;
               }
               var params=`userId=${this.tableSelection[0].id}`;
               var arr2= `roleId=${this.tableSelection1[0].id}`;
              // this.$refs.table.$refs.tbody.objData[index]._isChecked = true
             //  let arr=this.$refs.tree.getCheckedAndIndeterminateNodes();
               //   let str= arr.map(node=>"roleId="+node.id).join("&");
               params+="&"+arr2;
               axios.get(`${ctx}/sys/user/grant?${params}`)
                   .then(({data})=>{
                       this.grantFlag=false;//关闭模态框
                    //   this.$refs.table.$refs.tbody.objData[index]._isChecked = true
                       iview.Message.success({content:data.msg});
                     this.searchUserList()
                   });

           },
           /*toUpload(){
               this.uploadFlag=true;
           },*/
           /*doBeforeUpload(file){
               const reader=new FileReader();
         reader.readAsDataURL(file);
                 reader.onloadend=()=>{
               this.img=reader.result;
}
        /*   },
           toUpdate(row){
               Object.assign(this.user,row);
               this.updateFlag=true;
           },*/
        /*   update(){
               let params=Qs.stringify(this.user,{serializeDate:(date)=> {
                       return  moment(date).format("YYYY-MM-DD HH:mm");
                   }});
               axios.post(`${ctx}/sys/user/update`,Qs.parse(params))
                   .then(({data})=>{
                       this.updateFlag=false;//关闭模态框
                       iview.Message.success({content:data.msg});
                       this.searchUserList();
                   });
           },*/
           /*toUpdatepwd(row){
               //this.role=row;
               Object.assign(this.user,row);
               this.updateFlagpwd=true;
           },
           updatepwd(){
               axios.post(`${ctx}/sys/user/updatepwd`,this.user)
                   .then(({data})=>{
                       this.updateFlagpwd=false;//关闭模态框
                       iview.Message.success({content:data.msg});
                       this.searchUserList();
                   });
           },*/
    /*       del(row,index){
               let _this=this;
               let flag= iview.Modal.confirm({
                   title:"您确实要删除么？",
                   content:"该操作不可逆，请谨慎操作。",
                   onOk(){
                       axios.get(`${ctx}/sys/user/del?id=${row.id}`)
                           .then(({data})=>{
                               iview.Message.success({content:data.msg});
                               //_this.search();
                               _this.pageResult.rows.splice(index,1);
                           });
                   }
               });
           },*/
           /*toAdd(){
               this.user = {};
               this.addFlag=true;

           },*/
         /*  add(){
               axios.post(`${ctx}/sys/user/add`,this.user)
                   .then(({data})=>{
                       this.addFlag=false;//关闭模态框
                       iview.Message.success({content:data.msg});
                       this.searchUserList();

                   });
           },*/
       },
        mounted(){
           this.searchRoleList();
           this.searchUserList();
        },

    });
</script>
</body>
</html>
